import React from 'react';
import { Button } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { loadSpread, releaseSpread } from '../../../../utils/loadSpread'
import { observer } from "mobx-react";
@withRouter
@observer
export default class TaskViewExcel extends React.Component {
    constructor(props){
        super(props);
    }
    componentDidMount() {
        this.t = loadSpread(this.loadWorkbook);
        window.excelHistory = this.props.history;
    }
    componentWillUnmount() {
        releaseSpread(this.t);
    }
    loadWorkbook = () => {
        const { store, readonly } = this.props;
        
        store.loadWorkbook();
        if (this.container) {
            const workbook = new window.GC.Spread.Sheets.Workbook(this.container,{
                newTabVisible:false
            });
            const fbx = new window.GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(this.formulaTextBox, {});
            fbx.workbook(workbook);
            store.initWorkbook(workbook, readonly);
        }
    }
    render() {
        const { store, browserStore,history } = this.props;
        return (
            <div className="edc-task-view-excel" style={{height:'100%'}} >
                {/* <Spin spinning={!store.isInit || store.loading} size="large" wrapperClassName="wea-edc-excel-spin">*/}
                    <div className="edc-workbook">
                        <div className="edc-workbook-head" >
                            <div className="cell-name">{store.activeCellName}</div>
                            <div className="cell-opt"><i className="icon-mode-function" style={{ fontSize: 16, color: '#57c5f7' }} /></div>
                            <input disabled={store.readonly} className="formula-text-box ant-input" ref={ref => this.formulaTextBox = ref} />
                        </div>
                        <div style={{ height:'100%'}}>
                            <div className="workbook-container" id={`edcWorkbookOfPage${store.pageid}`} ref={ref => this.container = ref} style={{ height: '100%' }} />
                        </div>
                    </div>
                    {/*</Spin> */}
                <div ref={ref => store.cubeDetialBtns = ref} className="edc-detial-btns" key="btns">
                    <Button type="primary" onClick={store.addDetail}><i className="icon-coms-plus" /></Button>
                    {store.showDetailDelete && <Button type="primary" onClick={store.deleteDetail}><i className="icon-coms-Loss" /></Button>}
                </div>
                <div hidden id="customFunDiv"></div>
                <div hidden id="dateDiv"></div>
            </div>
        )
    }
}